<template>
	<view class="p-bot40" v-if="pageData">
		<u-sticky customNavHeight="0" :offsetTop="0">
			<view class="Nav">
				<view class="NavLeft">
					<u-tabs :list="pageData" @click="click" lineColor="red" keyName="name"
						:inactiveStyle="inactiveStyle" :current="current" :activeStyle="activeStyle"></u-tabs>
				</view>
				<view class="history" @click="Toggle">{{history == 1?'全部':'历史取号'}}</view>
			</view>
		</u-sticky>

		<view class="Wrapper" v-if="pageData[current].line_up">
			<view class="list" v-for="(item,index) in pageData[current].line_up" :key="index">
				<view class="listNum">
					<text class="color_33 size28">预约号</text>
					<text class="black size60 bold">{{item.num}}</text>
					<text class="color_33 size28">就餐人数 {{item.people}} 位</text>
				</view>
				<view class="Box">
					<view class="UserTel ">
						<view class="User">
							<image :src="$imgUrls(item.member_info.v_headimg)" mode="aspectFill" class="UserImG">
							</image>
							<view class="d-flex f-column flex-1  hidden">
								<text class="color_33 size28 ellipsis">{{item.member_info.v_name}}</text>
								<text class="color_33 size26">{{item.member_info.v_tel}}</text>
							</view>
						</view>
						<view class="iconfont icon-dadianhua color_169 size48 padding20 "
							@click="$common.Tel(item.member_info.v_tel)"></view>
					</view>
					<view class="operate" v-if="history == 0">
						<view class="oper Call" @click.stop="Call(item)">叫号</view>
						<view class="oper expired" @click.stop="Expired(item)">过期</view>
						<view class="oper Make" @click.stop="appointment(item)">已应约</view>
					</view>
					<view class="row j-sb a-center" v-if="history == 1">
						<view class="d-flex a-center">
							<view class="oper expired" v-if="item.state == 3">已撤销</view>
							<view class="oper expired" v-if="item.state == 2">已过期</view>
							<view class="oper Make" v-if="item.state == 1">已应约</view>
						</view>
						<view class="d-flex a-center" @click.stop="lookOrders(item)"
							v-if="item.orderCount && item.orderCount > 0">
							<text class="h6 color_169">查看订单</text>
							<text class="iconfont icon-xiangyouxiayiye color_169 h6"></text>
						</view>

					</view>
				</view>
			</view>

		</view>

		<view class="row j-centert m-top100" v-if="!pageData[current].line_up">
			<u-empty mode="order" text="暂无相关信息"></u-empty>
		</view>

		<u-modal :show="show" @cancel="show = false" @confirm="Configexpired" :duration="20" showCancelButton
			cancelText="取消" confirmText="确定" asyncClose width="710rpx">
			<view class="slot-content " v-if="line_up_detail && gift">
				<text class="black size28">预约号</text>
				<text class="black size68 bold">{{line_up_detail.num}}</text>
				<text class="color_33 size28">就餐人数 {{line_up_detail.people}} 位</text>
				<text class="color_33 size28 m-top10">{{gift.pass.pass_msg}}</text>

				<scroll-view scroll-x="true" class="scrollView nowrap">
					<view class="list" v-for="item in gift.gifts" :key="item.id">
						<view class="imgBox">
							<image :src="$imgUrls(item.img)" mode="aspectFill" class="wh"></image>
							<!-- 	<view class="Select">
								<view class="iconfont icon-xuanze color_169 size36 bold"></view>
							</view> -->
						</view>
						<text class="gift ellipsis">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- <text class="black size36 m-top20">请选择获赠礼品 4选3</text> -->
			</view>
		</u-modal>

	</view>
</template>
<!-- 
    `state` 预约状态 0：新叫号 1：已应约 2：过期 3:撤销',
 -->
<script>
	export default {
		data() {
			return {

				Img: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
				show: false, // 过期
				pageData: [],
				current: 0,
				history: 0,
				historyTxt: '历史取号',
				line_up_detail: '',
				gift: '',
			}
		},
		onLoad(opt) {
			this.lineUpInfo()
		},
		methods: {
			lineUpInfo() {
				this.$http.get({
					url: '/singleSaleManageApi/lineUpInfo',
					data: {
						shop_id: uni.getStorageSync('store_id'),
						history: this.history
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data || []
					this.pageData = result
				})
			},
			click(e) {
				this.current = e.index
			},
			Call(Item) {
				this.$model('提示', `是否呼叫预约 ${Item.num}号?`).then(res => {
					if (!res) return
					this.saveLineUp(4, Item.id)
				})
			},
			Expired(Item) {
				this.$model('提示', `是否确定过期 ${Item.num}号?`).then(res => {
					if (!res) return
					this.saveLineUp(2, Item.id)
				})
			},
			appointment(Item) {
				this.$model('提示', `确定应约 ${Item.num}号?`).then(res => {
					if (!res) return
					this.lineUpDetail(Item.id)
				})
			},


			saveLineUp(state, id) {
				this.$http.post({
					url: '/singleSaleManageApi/saveLineUp',
					data: {
						state,
						id,
						shop_id: uni.getStorageSync('store_id')
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)

					if (state == 4) return this.$Toast('呼叫成功！')

					if (state == 1 || state == 2 && this.pageData[this.current].line_up) {
						const Index = this.pageData[this.current].line_up.findIndex(item => item.id == id)
						this.pageData[this.current].line_up.splice(Index, 1)
						this.$Toast(res.msg)
					}
				})
			},

			lineUpDetail(id) {
				this.$http.get({
					url: '/singleSaleManageApi/lineUpDetail',
					data: {
						shop_id: uni.getStorageSync('store_id'),
						id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.line_up_detail = result.line_up_detail
					this.gift = result.gift
					result.gift.gifts ? this.show = true : this.saveLineUp(1, id)

				})
			},

			Configexpired() {
				this.saveLineUp(1, this.line_up_detail.id)
				this.show = false
			},
			Toggle() {
				if (this.history === 0) {
					this.history = 1
				} else {
					this.history = 0
				}
				this.lineUpInfo()
			},
			lookOrders(Item) {
				this.toUrl(`Orders?id=${Item.id}&shop_id=${Item.shop_id}`)
			}
		},

		computed: {
			activeStyle() {
				return {
					color: '#000',
					fontSize: '32rpx'
				}
			},
			inactiveStyle() {
				return {
					color: '#333',
					fontSize: '28rpx'
				}
			},
			// historyTxt() {

			// 	return this.history == 1 ? '全部' : '历史取号'
			// }
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $page;
	}

	.Nav {
		width: 100%;
		height: 90rpx;
		background-color: #ffffff;
		border-bottom: 1px solid $page;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.NavLeft {
			flex: 1;
			overflow: hidden;
		}

		.history {
			padding: 0 30rpx;
			height: 100%;
			background-color: #ffffff;
			color: red;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
	}

	.Wrapper {
		width: 710rpx;
		margin: 24rpx auto;

		.list {
			width: 100%;
			min-height: 200rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			display: flex;

			.listNum {
				width: 230rpx;
				min-height: 200rpx;
				padding: 10rpx;
				border-right: 1px solid $page;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				margin-right: 10rpx;
			}

			.Box {
				width: 470rpx;
				padding: 10rpx;
				min-height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.UserTel {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.User {
						flex: 1;
						display: flex;
						align-items: center;
						overflow: hidden;

						.UserImG {
							width: 70rpx;
							height: 70rpx;
							display: block;
							border-radius: 6rpx;
							margin-right: 10rpx;
						}
					}
				}

				.operate {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-gap: 20rpx;

				}

				.oper {
					height: 58rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 26rpx;
					border-radius: 10rpx;
					padding: 0 24rpx;
				}

				.Call {
					background-color: #169bd5;
				}

				.expired {
					background-color: #ccc;
				}

				.Make {
					background-color: #006633;
				}

			}
		}
	}


	/deep/.u-modal__content {
		padding: 12px 16px 16px 16px !important;
	}

	.slot-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.scrollView {
			width: 100%;
			text-align: center;
			margin-top: 30rpx;

			.list {
				width: 140rpx;
				display: inline-block;
				margin: 0 10rpx;

				.imgBox {
					width: 100%;
					height: 140rpx;
					position: relative;
					border-radius: 10rpx;
					overflow: hidden;

					.Select {
						width: 40rpx;
						height: 40rpx;
						background-color: #ffffff;
						border-radius: 10rpx 0 0 0;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						bottom: 0;
						right: 0;
						z-index: 10;
					}
				}

				.gift {
					text-align: center;
					color: #333;
					display: block;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>